<template>
  <div class='wrap'>
    <!--默认-->
    <div class='line-h margin-l color-w bor-bot' v-if='type=="list"'>
      <span :style='lable'>{{title}}<span v-if='choose=="point"' class='point'>
      </span><span v-if='choose!="point"&& choose!=""' class='hot'>{{choose}}</span>

      </span>
      <span class='list-right'><img class='rightGo' v-if='rightGo=="more"' :src="rightSrc" @click='moreFunc()' alt=""></span>
      <span class='content padding-r'>{{content}}</span>
    </div>

    <!--icon-->
    <div class='line-h margin-l color-w bor-bot' v-if='type=="icon"'>
      <img v-if='titleicon' class='list-icon' :src="src" alt="">

      <span :style='lable'>{{title}}
      </span>
      <span class='list-right'><img class='rightGo' v-if='rightGo=="more"' :src="rightSrc" @click='moreFunc()' alt=""></span><span
      class='content padding-r'><img v-if='contenticon' class='list-icon1' :src="contentSrc" alt=""></span>
    </div>

    <!--带Switch-->
    <div class='line-h margin-l color-w bor-bot' v-if='type=="switch"'>
      <img v-if='titleicon' class='list-icon' :src="src" alt="">
      <span :style='lable'>{{title}}</span>
      <div class='rstchoose'>
        <rstchoose></rstchoose>
      </div>
    </div>

    <!--双行列表-->
    <div class='margin-l color-w bor-bot h75' v-if='type=="dubList"'>
      <div>
        <span :style='lable'>{{title}}<span v-if='choose=="point"' class='point'>
      </span><span v-if='choose!="point"&& choose!=""' class='hot'>{{choose}}</span>
        </span>
        <span v-if='rightGo=="content"' class='content1 padding-r'>{{content}}</span>
        <span class='dubList' v-if='rightGo=="more"'><img class='rightGo' :src="rightSrc" @click='moreFunc()' alt=""></span>
      </div>
      <div class='content2'>{{stateContent}}</div>
    </div>

    <!--双行列表icon-->
    <div class='margin-l color-w bor-bot h75' v-if='type=="dubIcon"'>
      <img v-if='dubicon' class='dub-icon' :src="src" alt="">
      <span class='db-remind'><span class='remindcen'>{{remindContent}}</span></span>
      <div>
        <div>
          <span :style='lable'>{{title}}<span v-if='choose=="point"' class='point'>
      </span><span v-if='choose!="point"&& choose!=""' class='hot'>{{choose}}</span>
          </span>
          <span v-if='rightGo=="content"' class='content1 padding-r'>{{content}}</span>
          <span class='dubList' v-if='rightGo=="more"'><img class='rightGo' :src="rightSrc" @click='moreFunc()' alt=""></span>
        </div>
        <div class='content2'>{{stateContent}}</div>
      </div>
    </div>

    <!--用户-->
    <div class='line-h60 margin-l color-w bor-bot' v-if='type=="userList"'>
      <img v-if='usericon' class='user-icon' :src="src" alt="">
      <span :style='lable'>{{title}}</span>
    </div>

    <!--图文列表-->
    <div class='margin-l color-w' v-if='type=="imageList"'>
      <img class='user-icon img-icon' :src="src" alt=""><span :style='lable' class='imgtitle'>{{title}}</span>
      <div class='image-list-content'>{{imageListContent}}</div>
      <div class='image-list'>
        <img v-if='imgsrc.length!=0' v-for='img in imgsrc' :src="img.imgsrc" alt="">
      </div>
      <div class='other-content'><span>{{userful}}</span> 有用&nbsp;&nbsp;<span>{{comment}}</span> 评论 <span
        class='datelist'>{{date}}</span></div>
    </div>


    <!--多行图文列表-->
    <div class='margin-l color-w bor-bot h106' v-if='type=="moreList"'>
      <img class='dub-icon more-icon' :src="src" alt="">
      <div>
        <div :style='lable' class='lable1'>{{title}}</div>
        <div class='content2 img-content'>{{imageListContent}}</div>
        <div class='other-img-content'><span>话题 {{userful}}</span>&nbsp;&nbsp;&nbsp;&nbsp;观点 <span>{{comment}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import rstchoose from '../components/Switch.vue'

  export default {
    name: "List",
    components: {rstchoose},
    props: {
      type: {type: String, default: "list"},
      content: {type: String, default: "内容"},
      stateContent: {type: String, default: "说明内容"},
      title: {type: String, default: "标题文字"},
      choose: {type: String, default: ''},
      rightGo: {type: String, default: "more"},
      titleicon: {type: Boolean, default: false},
      contenticon: {type: Boolean, default: true},
      dubicon: {type: Boolean, default: true},
      usericon: {type: Boolean, default: true},
      src: {type: String, default: '../../static/images/logo.png'},
      rightSrc: {type: String, default: '../../static/images/rightGo1.png'},
      contentSrc: {type: String, default: '../../static/images/others.png'},
      remindContent: {type: String, default: '1'},
      date: {type: String, default: '2017-7-14'},
      userful: {type: String, default: '0'},
      comment: {type: String, default: '1'},
      imgsrc: {
        type: Array, default() {
          return [{'imgsrc': '../../static/images/legalInsurance.png'}, {'imgsrc': '../../static/images/legalInsurance.png'}, {'imgsrc': '../../static/images/legalInsurance.png'}]
        }
      },
      imageListContent: {type: String, default: '啊四季度房价卡萨帝飞机撒点附近萨克附度房价卡萨帝飞机撒点附近萨克附度房价卡萨帝飞机撒点附近萨克附近萨克对方空间撒点会计法会计师'},
      lable: {
        type: Array, default(){
          return[
            {
              color: '#353638',
              fontSize: '.75rem',
              lineHeight: '2.4rem',
              fontWeight: 500
            }
          ]
        }
      },
      evenMore:{
        type:Function,
        default:null
      }
    },
    methods:{
      moreFunc(){
        this.evenMore();
      }
    }
  }
</script>
<style scoped>
  .wrap {
    background-color: #fff;
  }

  .bor-bot {
    background-image: url(../../static/images/xianbot.png);
    background-position: bottom;
    background-size: 1px;
    background-repeat: repeat-x;
    padding-bottom: 1px;
  }

  .color-w {
    background-color: #fff;
  }

  .h75 {
    height: 3.75rem;
  }

  .h106 {
    height: 5.3rem;
  }

  .lable {
    color: #353638;
    font-size: .75rem;
    line-height: 2.4rem;
    font-weight: 500;
  }

  .lable1 {
    font-size: .85rem;
    line-height: 2.8rem;
  }

  .line-h {
    line-height: 2.4rem;
  }

  .line-h60 {
    line-height: 3rem;
  }

  .margin-l {
    margin-left: .75rem;
  }

  .padding-r {
    padding-right: 0.5rem;
  }

  .content {
    color: #a2a9b0;
    font-size: .7rem;
    float: right;
  }

  .point {
    display: inline-block;
    margin-left: .5rem;
    height: .3rem;
    width: .3rem;
    border-radius: 50%;
    background: red;
    margin-bottom: 0.15rem;
  }

  .hot {
    color: white;
    font-size: .6rem;
    width: auto;
    height: .5rem;
    background-color: red;
    margin-left: .5rem;
    line-height: 2.4rem;
  }

  .rightGo {
    padding-right: 0.75rem;
    vertical-align: middle;
    height: 1rem;
  }

  .list-icon {
    display: inline-block;
    width: 1.45rem;
    height: 1.45rem;
    margin-right: .5rem;
    vertical-align: middle;
  }

  .list-icon1 {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0;
    vertical-align: middle;
  }

  .user-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
    vertical-align: middle;
  }

  .img-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
  }

  .list-right {
    float: right;
  }

  .dubList {
    float: right;
    line-height: 3.75rem;
  }

  .content1 {
    color: #a2a9b0;
    font-size: .6rem;
    float: right;
    line-height: 2.2rem;
  }

  .content2 {
    color: #a2a9b0;
    font-size: .65rem;
    line-height: .5rem;
  }

  .dub-icon {
    float: left;
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: .5rem;
    margin-top: .675rem;
  }

  .more-icon {
    height: 3.8rem;
    width: auto;
  }

  .db-remind {
    position: absolute;
    top: .3rem;
    left: 2.2rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: red;
    font-size: .5rem;
    text-align: center;
  }

  .remindcen {
    position: absolute;
    top: -0.6rem;
    left: 0;
    width: .5rem;
    color: white;
  }

  .imgtitle {
    color: #a2a9b0;
    font-size: .65rem;
  }

  .image-list-content {
    color: #353638;
    font-size: .85rem;
    line-height: 1.4rem;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-right: .75rem;
  }

  .img-content {
    line-height: .7rem;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-right: .75rem;
  }

  .image-list img {
    display: inline-block;
    margin: .75rem .1rem 0 0;
    width: 31%;
  }

  .other-content {
    color: #a2a9b0;
    font-size: .6rem;
    margin-top: .5rem;
  }

  .other-img-content {
    color: #a2a9b0;
    font-size: .6rem;
    line-height: 1.2rem;
  }

  .datelist {
    float: right;
    margin-right: .75rem;

  }

  .rstchoose {
    float: right;
    margin-right: .75rem;
  }
</style>
